import Vue from 'vue'

/**
 * usage: v-freeze="param". for example: v-freeze="600", v-freeze="{disabledTime:600, bgc:'#DDDDDD'}";
 * @param {number | object};
 * */
Vue.directive('freeze', {
  bind: function(el, binding) {
    el.onclick = function() {
      var disabledTime, backgroundColor, borderColor
      if (typeof binding.value === 'object') {
        disabledTime = binding.value.disabledTime || 500
        backgroundColor = binding.value.bgc
        borderColor = binding.value.bdc
      } else {
        disabledTime = binding.value || 500
        backgroundColor = '#DDDDDD'
        borderColor = '#DDDDDD'
      }
      el.disabled = true
      el.style.backgroundColor = backgroundColor
      el.style.borderColor = borderColor
      el.style.cursor = 'not-allowed'
      setTimeout(function() {
        el.disabled = false
        el.style.backgroundColor = ''
        el.style.borderColor = ''
        el.style.cursor = ''
      }, disabledTime)
    }
  }
})
